<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html class="x-admin-sm">

<head>
	<meta charset="UTF-8">
	<title>新闻发布网页</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
	<link rel="stylesheet" href="../css/font.css">
	<link rel="stylesheet" href="../css/xadmin.css">
	<link rel="stylesheet" href="ui/layui/css/layui.css">
	   <script src="ui/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/xadmin.js"></script>
    <style type="text/css">
    .layui-btn input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
    </style>
</head>
<body>
<% String userName = (String) session.getAttribute("username"); %>
<% if ("0".equals(request.getParameter("message"))) { %>
    <script>alert("新闻发布成功！");</script>
<% } %>
<script>
    layui.use('form', function(){
  var form = layui.form;
});
</script>
<div class="layui-fluid">
    <div class="layui-row">
        <form id="news-form" action="AddNewsServlet" method="post" accept-charset="UTF-8" class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label for="author" class="layui-form-label">
                    作者：
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="author" name="author" required="" lay-verify="required" width="300px"
                           autocomplete="off" class="layui-input" value="<%=userName %>" readonly>
                </div>
            </div>
            <div class="layui-form-item">
				<label for="name" class="layui-form-label">
					文章标题
				</label>
				<div class="layui-input-inline">
					<input type="text"  name="title" required="" lay-verify="required" width="300px"
						   autocomplete="off" class="layui-input" value="">
				</div>
			</div>
            <div class="layui-form-item">
                <label for="classify" class="layui-form-label">
                    文章分类：
                </label>
                <div class="layui-input-inline">
                    <select id="classify" name="classify" required="">
                        <option value="">请选择</option>
                        <option value="国内新闻">国内新闻</option>
                        <option value="国外新闻">国外新闻</option>
                        <option value="娱乐新闻">娱乐新闻</option>
                        <option value="体育新闻">体育新闻</option>
                        <option value="军事新闻">军事新闻</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="keywords" class="layui-form-label">
                    关键词：
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="keywords" name="keywords" width="300px"
                           autocomplete="off" class="layui-input" value="" required="">
                </div>
            </div>
           <div class="layui-form-item">
			  <label for="pubtime" class="layui-form-label">发布时间：</label>
			  <div class="layui-input-inline">
			    <input type="text" id="pubtime" name="pubtime" disabled="true" autocomplete="off" class="layui-input" value="">
			    <input type="hidden" id="pubtimeHidden" name="pubtimeHidden">
			  </div>
			</div>
			<div class="layui-input-inline" style="position: fixed; top: 0; right: 480px;">
    <div class="layui-form-item">
        <label for="image" class="layui-form-label">上传图片：</label>
        <div class="layui-input-block" style="width: auto;">
            <button type="button" class="layui-btn" id="uploadImageBtn" style="margin-left: 30px;">
                <i class="layui-icon layui-icon-upload"></i> 选择文件
            </button>
            <input type="file" id="image" name="image" accept="image/*" style="display: none;">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图片预览：</label>
        <div class="layui-input-inline" style="margin-left: 30px;">
            <img id="preview" style="width: 256px; height: 192px;">
        </div>
    </div>
</div>
<input type="hidden" id="imageName" name="imageName">
<div class="layui-form-item layui-form-text">
				<label for="desc" class="layui-form-label">
					文章内容：
				</label>
				<div class="layui-input-block">
					<textarea placeholder="请输入内容" id="desc" name="content" style="height: 260px" class="layui-textarea">${n.content}</textarea>
				</div>
			</div>
			<div class="layui-form-item" style="width: 200px;margin: 0 auto">
				<button class="layui-btn"  type="submit"  style=" width:100px;margin-top: 20px">发布</button>
				</div>
            </form>
            </div>
            </div>
            <script>
			  setInterval(function() {
			  var date = new Date();
			  var year = date.getFullYear();
			  var month = String(date.getMonth() + 1).padStart(2, '0');
			  var day = String(date.getDate()).padStart(2, '0');
			  var hour = String(date.getHours()).padStart(2, '0');
			  var minute = String(date.getMinutes()).padStart(2, '0');
			  var second = String(date.getSeconds()).padStart(2, '0');
			  var dateTimeString = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
			
			  document.querySelector("#pubtime").value = dateTimeString;
			  document.querySelector("#pubtimeHidden").value = dateTimeString;
			}, 1000);
			</script>
			<script type="text/javascript">
				// 获取页面元素
				var imageInput = document.getElementById('image');
				var previewImage = document.getElementById('preview');
				var uploadBtn = document.getElementById('uploadImageBtn');
				var imageNameInput = document.getElementById('imageName');
				
				// 绑定上传图片事件
				uploadBtn.onclick = function () {
				    imageInput.click();
				};
				
				// 选取图片后进行预览并保存图片文件和文件名
				imageInput.onchange = function () {
				    var file = this.files[0];
				    if (!file) {
				        return;
				    }
				
				    // 判断是否为图片文件
				    if (!(/^image\//.test(file.type))) {
				        alert("请选择图片文件！");
				        return;
				    }
				
				    // 获取并设置图片预览
				    var reader = new FileReader();
				    reader.onload = function () {
				        previewImage.src = reader.result;
				    };
				    reader.readAsDataURL(file);
				
				    // 保存图片名到隐藏的input框中
				    imageNameInput.value = 'img/' + encodeURIComponent(file.name);
				
				    // 将图片文件上传到UploadServlet
				    
				
				};
				</script>
</body>

</html>